<template>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span>{{ title }}组</span>
				<div>
					<el-button type="warning">删除人员</el-button>
					<el-button type="primary">选择人员</el-button>
					<el-button @click="handleLotteryClick" type="primary">随机赛道</el-button>
					<!-- <el-button type="primary">成绩</el-button> -->
					<el-button type="danger">删除组</el-button>
				</div>
			</div>
		</template>
		<el-table ref="multipleTableRef" :data="data" style="width: 100%">
			<el-table-column property="isChecked" width="55">
				<template #default="scope">
					<el-checkbox v-model="scope.row.isChecked" size="small" />
				</template>
			</el-table-column>
			<el-table-column property="track" align="center" label="号位" />
			<el-table-column property="competeName" align="center" label="姓名" />
			<el-table-column property="sensorNumber" align="center" label="传感器" />
			<!-- <el-table-column property="grades" label="成绩" /> -->
			<!-- <el-table-column property="rank" label="排名" /> -->
		</el-table>
	</el-card>
</template>

<script lang="ts" setup>
import { computed } from "vue";
const props = defineProps({
	tableData: {
		type: Array,
		required: true
	},
	index: {
		type: Number,
		defalut: 1
	}
});
const title = computed(() => {
	//转换索引为字母分组
	let idx: number = props.index as number;
	let str = [];
	for (let i = 0; i < 26; i++) {
		str.push(String.fromCharCode(i + 65));
	}
	return str[idx];
});
//双向绑定
const data = computed(() => {
	return props.tableData.map((item: any, index: number) => {
		return (item = {
			track: ++index,
			competeName: item.competeName,
			sensorNumber: item.sensorNumber
		});
	});
});
/**
 * @param n 随机数最大长度
 */
const randomNum = (n: number) => {
	let arr = [];
	let temp;
	for (let i = 0; i < n; i++) {
		arr[i] = i;
	}
	for (let j = 0; j < n; j++) {
		let index = Math.floor(Math.random() * n);
		temp = arr[n - 1];
		arr[n - 1] = arr[index];
		arr[index] = temp;
		n--;
	}
	return arr;
};
//随机赛道
const handleLotteryClick = () => {
	let len = data.value.length;
	let arr = randomNum(len);
	let newArr: any = [];
	let oldArr = data.value;
	arr.forEach(item => {
		newArr.push(oldArr[item]);
	});
};
// const handleSelectionChange = (val: any) => {
// 	val.isChecked = true;
// };
</script>

<style lang="scss" scoped>
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
